import React from "react"
import '../style/MV_Rankings.css'
//import Recommends from "./recomments/recommends"
import { Tabs, WhiteSpace, Badge,Icon ,NavBar} from 'antd-mobile';
import { observer,inject } from 'mobx-react'
import Public_TAB from './Public_TAB'
const tabs = [
  { title: <Badge >内地</Badge> },
  { title: <Badge >港台</Badge> },
  { title: <Badge >欧美</Badge> },
  { title: <Badge >韩国</Badge> },
  { title: <Badge >日本</Badge> },
];
@inject('Video')
@observer
class APP extends React.Component{
 
  componentDidMount(){
    const { Video } = this.props
    Video.getViolist('港台')
    Video.setViolist()
  }
  MvPLAY(ele){
    this.props.history.push({pathname:'/MVPlay',state:{id:`${ele}`}})
  }
  render(){
    
    const { list } = this.props.Video
    return(
      
      <div className="header">
        <header>
            <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() =>{
            console.log(this.props)
            this.props.history.push("/Song")
          }}
          rightContent={[
            // <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
            // <Icon key="1" type="ellipsis" />,
          ]}
          >MV排行榜</NavBar>
        </header>

      <Tabs tabs={tabs}
        initialPage={1}
        onChange={(tab, index) => { console.log('onChange', index, tab); }}
        onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
      >
        <div className="header" onClick={console.log('1')}>
        
        <ul className="ul">
            {list.map(item=>{
            return(
            <li key={item.artistId}>
            < img src={item.cover} className="img" onClick={() =>this.MvPLAY(item.id)}/>
            <div className="name">
                <span className="name_id">{"0"+item.lastRank}</span>
                <div className="name_p">
                  <p className="p">{item.name}</p >
                  <p className="p2">{item.artistName}</p >
                </div>
            </div>
            </li>
            ) 
            })}
        </ul>
        </div>
        <div className="header" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
        <ul className="ul" >
            {list.map(item=>{
            return(
            <li key={item.artistId}>
            < img src={item.cover} className="img"/>
            <div className="name">
                <span className="name_id">{"0"+item.lastRank}</span>
                <div className="name_p">
                  <p className="p">{item.name}</p >
                  <p className="p2">{item.artistName}</p >
                </div>
            </div>
            </li>
            ) 
            })}
        </ul>
        </div>
        <div className="header" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center',backgroundColor: '#fff' }}>
        <ul className="ul" >
            {list.map(item=>{
            return(
            <li key={item.artistId}>
            < img src={item.cover} className="img"/>
            <div className="name">
                <span className="name_id">{"0"+item.lastRank}</span>
                <div className="name_p">
                  <p className="p">{item.name}</p >
                  <p className="p2">{item.artistName}</p >
                </div>
            </div>
            </li>
            ) 
            })}
        </ul>
        </div>
        <div className="header" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
        <ul className="ul" >
            {list.map(item=>{
            return(
            <li key={item.artistId}>
            < img src={item.cover} className="img"/>
            <div className="name">
                <span className="name_id">{"0"+item.lastRank}</span>
                <div className="name_p">
                  <p className="p">{item.name}</p >
                  <p className="p2">{item.artistName}</p >
                </div>
            </div>
            </li>
            ) 
            })}
        </ul>
        </div>
        <div className="header" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center',  backgroundColor: '#fff' }}>
        <ul className="ul" >
            {list.map(item=>{
            return(
            <li key={item.artistId}>
            < img src={item.cover} className="img"/>
            <div className="name">
                <span className="name_id">{"0"+item.lastRank}</span>
                <div className="name_p">
                  <p className="p">{item.name}</p >
                  <p className="p2">{item.artistName}</p >
                </div>
            </div>
            </li>
            ) 
            })}
        </ul>
        </div>
        <div className="header" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center',backgroundColor: '#fff' }}>
        <ul className="ul" >
            {list.map(item=>{
            return(
            <li key={item.artistId}>
            < img src={item.cover} className="img"/>
            <div className="name">
                <span className="name_id">{"0"+item.lastRank}</span>
                <div className="name_p">
                  <p className="p">{item.name}</p >
                  <p className="p2">{item.artistName}</p >
                </div>
            </div>
            </li>
            ) 
            })}
        </ul>
        </div>
      </Tabs>
      <WhiteSpace />
      <Public_TAB className='Public_TAB' pops={this.props} />
    </div>
    
    )
  }
}
export default   APP